<template>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工资：{{ job.j1.salary }}</h2>

  <button @click="name += '~'">改姓名</button>
  <button @click="age++">改年龄</button>
  <button @click="job.j1.salary++">涨工资</button>
</template>
  
  <script>
import { toRefs,reactive, computed, ref, watch, watchEffect } from "vue";
export default {
  name: "App",
  components: {},

  setup(props, context) {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // torefs把原来的person的每一项 都展开生成响应式的数据（ref）
    // torefs返回一个对象  里面的值都是响应式的。key value是和源数据同步的 一致的
    
    return { ...toRefs(person) };
  },
};
</script>
  
  <style>
</style>
  